<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .fa{
            display: flex;
            background-color: #ccc;

            /* 主轴对齐 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* 两端对齐 */
            /* justify-content: space-between; */
            /* 均匀分布 */
            justify-content: space-around;
        }
        .c1{
            background-color: red;
        }
        .c2{
            background-color: green;
        }
        .c3{
            background-color: blue;
        }
        .c4{
            background-color: pink;
        }
        
    </style>
    <div class="fa">
        <p class="c1">11</p>
        <p class="c2">222</p>
        <p class="c3">333</p>
        <p class="c4">444</p>
        <span style="background-color: purple;width: 100px;">赵云</span>
        <span>张飞</span>
    </div>
    <hr>
    <style>
        .fa2{
            height: 200px;
            /* 交叉轴对齐 拉伸 */
            /* align-items: stretch; */
            /* 垂直居中
            align-items: center;
            align-items: flex-start; */
            align-items: flex-end;
        }
    </style>
    <div class="fa fa2">
        <p class="c1">11</p>
        <p class="c2">222</p>
        <p class="c3">333</p>
        <p class="c4">444</p>
        <span style="background-color: purple;width: 100px;">赵云</span>
        <span>张飞</span>
    </div>
    <h1>左右布局</h1>
    <style>
        .fa3{
            justify-content: flex-start;
        }
    </style>
    <div class="fa fa3">
        <p class="c1">11</p>
        <p class="c2">222</p>
        <p class="c3">333</p>
        <p class="c4" style="margin-right: auto;">444</p>
        <span style="background-color: purple;width: 100px;">赵云</span>
        <span>张飞</span>
    </div>
    <hr>
    <style>
        .box{
            width: 200px;
            height: 50px;
            background-color: red;

            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <div class="box"></div>
</body>
</html>